<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import { Button } from 'ant-design-vue';
import dayjs from 'dayjs';
import {
  deleteMessage,
  editMessage,
  getReplyList,
  noticeCheck,
  replyMessage
} from '@/service/api/modules/manage/message-list';
import Modal from '@/components/common/modal.vue';
import Form from '@/components/common/form.vue';
import Edit from './edit.vue';
import Check from './check.vue';

const props = defineProps({
  row: {
    type: Object,
    default: () => null
  }
});

const recoverModalRef = ref(null);

const height = ref(300);

nextTick(() => {
  height.value = recoverModalRef.value.clientHeight / 2;
  console.log(height.value);
});

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'evenReason',
    dataIndex: 'evenReason',
    title: '原因分析',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'evenSolution',
    dataIndex: 'evenSolution',
    title: '改善措施',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'operator',
    dataIndex: 'operator',
    title: '处理人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'operatorTime',
    dataIndex: 'operatorTime',
    title: '时间',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'checkResultName',
    dataIndex: 'checkResultName',
    title: '验证结果',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'checkTime',
    dataIndex: 'checkTime',
    title: '验证时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return dayjs(record.checkTime).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'checkDesc',
    dataIndex: 'checkDesc',
    title: '验证备注',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'checker',
    dataIndex: 'checker',
    title: '验证人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'czRow',
    dataIndex: 'czRow',
    title: '操作',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (!record.checkResultName) {
        return (
          <div>
            <Button
              type="link"
              danger
              class="pl-3px pr-3px"
              onClick={() => {
                delRow(record);
              }}
            >
              删除
            </Button>
            <Button
              type="link"
              class="pl-3px pr-3px"
              onClick={() => {
                handleEditOpen(record);
              }}
            >
              修改
            </Button>
            <Button type="link" class="pl-3px pr-3px" onClick={() => handleCheckOpen(record)}>
              验证
            </Button>
          </div>
        );
      }
      return '';
    }
  }
];

const tableData = ref([]);

function getTableData() {
  getReplyList({
    noticeId: props.row.noticeUuid
  }).then(({ data, error }) => {
    if (!error) {
      data?.forEach((item, index) => {
        item.dataIndex = index + 1;
      });
      tableData.value = data;
    }
  });
}

getTableData();

function delRow(row) {
  window.$modal.confirm({
    title: `确定删除?`,
    onOk: () => {
      deleteMessage(row.noticetReplyUuid).then(({ error }) => {
        if (!error) {
          window.$message.success('删除成功');
          getTableData();
        }
      });
    },
    onCancel: () => {}
  });
}

// 编辑
const editVisible = ref(false);
const editLoading = ref(false);
const editRef = ref(null);
const currentEditRow = ref(null);
function handleEditOpen(row) {
  currentEditRow.value = row;
  editVisible.value = true;
}

function handleEditClose() {
  editVisible.value = false;
}

function handleEditOk() {
  editLoading.value = true;
  const editFormVal = { ...editRef.value.model };
  const params = {
    ...editFormVal,
    noticetReplyUuid: currentEditRow.value.noticetReplyUuid
  };
  editMessage(params)
    .then(({ error }) => {
      if (!error) {
        window.$message.success('修改成功');
        editVisible.value = false;
        getTableData();
      }
    })
    .finally(() => (editLoading.value = false));
}

const formList = [
  {
    type: 'tabs',
    span: 24,
    name: '回复信息'
  },
  {
    type: 'textarea',
    key: 'evenReason',
    label: '原因分析',
    placeholder: '请输入原因分析',
    span: 24,
    rule: {
      required: true,
      message: '请输入原因分析',
      trigger: 'blur'
    }
  },
  {
    type: 'textarea',
    key: 'evenSolution',
    label: '改善措施',
    placeholder: '请输入改善措施',
    rule: {
      required: true,
      message: '请输入改善措施',
      trigger: 'blur'
    },
    span: 24
  }
];

const model = ref({
  evenReason: null,
  evenSolution: null
});

const formRef = ref(null);

async function submitForm() {
  await formRef.value.validateForm();
  const data = {
    noticeId: props.row.noticeUuid,
    ...model.value
  };

  const { error } = await replyMessage(data);
  if (!error) {
    window.$message.success('回复成功');
    handleClose();
  }
}

const currentRowId = ref(null);
const customRow = record => {
  return {
    style: {
      // 'background-color': record.noticetReplyUuid === currentRowId.value ? 'rgba(86, 205, 243, 0.3)' : ''
    },
    class: record.noticetReplyUuid === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRowId.value = record.noticetReplyUuid;
    }
  };
};

const checkVisible = ref(false);
const checkLoading = ref(false);
const checkRef = ref(null);
const currentChecktRow = ref(null);
function handleCheckOpen(row) {
  currentChecktRow.value = row;
  checkVisible.value = true;
}

function handleCheckClose() {
  checkVisible.value = false;
}

async function handleCheckOk() {
  const checkFormVal = { ...checkRef.value.model };
  const data = {
    ...checkFormVal,
    noticetReplyUuid: currentChecktRow.value.noticetReplyUuid
  };
  if (!data.checkResult) {
    window.$message.error('请选择验证结果');
    return;
  }
  checkLoading.value = true;
  const { error } = await noticeCheck(data);
  if (!error) {
    window.$message.success('操作成功');
    handleCheckClose();
    getTableData();
  }
  checkLoading.value = false;
}

defineExpose({
  submitForm
});
</script>

<template>
  <div ref="recoverModalRef" class="recover-modal h-full w-full">
    <div class="h-50% table">
      <ATable
        :data-source="tableData"
        :columns="column"
        :pagination="false"
        size="small"
        row-key="noticetReplyUuid"
        bordered
        :scroll="{ y: height }"
      ></ATable>
    </div>
    <div
      class="form"
      :style="{
        height: `calc(100% - ${height + 29}px)`
      }"
    >
      <Form ref="formRef" v-model:model="model" :form-list="formList"></Form>
    </div>
  </div>

  <!-- 修改 -->
  <Modal
    v-model:visible="editVisible"
    title="修改"
    width="666px"
    height="460px"
    row-key="noticetReplyUuid"
    :custom-row="customRow"
    :centered="true"
    :destroy-on-close="true"
    @close="handleEditClose"
  >
    <Edit ref="editRef" :row-data="currentEditRow"></Edit>
    <template #footer>
      <div class="modal-footer">
        <AButton :loading="editLoading" type="primary" @click="handleEditOk">回 复</AButton>
        <AButton @click="handleEditClose">关 闭</AButton>
      </div>
    </template>
  </Modal>

  <Modal
    v-model:visible="checkVisible"
    title="验证"
    width="666px"
    height="460px"
    :custom-row="customRow"
    :centered="true"
    :destroy-on-close="true"
    @close="handleEditClose"
  >
    <Check ref="checkRef" :row-data="currentChecktRow"></Check>
    <template #footer>
      <div class="modal-footer">
        <AButton :loading="checkLoading" type="primary" @click="handleCheckOk">验 证</AButton>
        <AButton @click="handleCheckClose">关 闭</AButton>
      </div>
    </template>
  </Modal>
</template>

<style lang="scss" scoped></style>
